<template>
  <div>
    <div class="allcatin_top">
      <el-button type="success" @click="addtable">添加表格</el-button>
      <el-button type="success" @click="savetable">保存数据</el-button>
    </div>

    <div class="allcatin_hader">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="thStyleFun"
        :cell-style="cellStyleFun"
        @cell-dblclick="edit"
      >
        <!--   @blur="DFT_CODE(scope.row.userId, scope.row.DFT_CODE)" -->
        <el-table-column label="DFT_CODE" prop="DFT_CODE">
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.DFT_CODE"
                size="mini"
              ></el-input>
              <span v-else>{{ scope.row.DFT_CODE }}</span>
            </el-form>
          </template>
        </el-table-column>

        <!--   @blur="blurname(scope.row.userId, scope.row.DFT_NAME)"-->
        <el-table-column label="DFT_NAME" prop="DFT_NAME">
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.DFT_NAME"
                size="mini"
              ></el-input>
              <span v-else>{{ scope.row.DFT_NAME }}</span>
            </el-form>
          </template>
        </el-table-column>

        <!--  @blur="blurtype(scope.row.userId, scope.row.DFT_TYPE)" -->
        <el-table-column label="DFT_TYPE" prop="DFT_TYPE">
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.DFT_TYPE"
                size="mini"
              ></el-input>
              <span v-else>{{ scope.row.DFT_TYPE }}</span>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              :loading="scope.row.isLoading"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tablelist: [],
      tableData: [],
    };
  },
  mounted() {
    this.gettablelist();
  },
  methods: {
    gettablelist() {
      this.ajax.get("func/1023/selDef").then((res) => {
        //   console.log(res.data);
        res.data.forEach((ele) => {
          this.$set(ele, "isEdit", false);
          this.$set(ele, "isAbnormal", false);
        });
        this.tableData = res.data;
      });
    },

    edit(row, column, cell, event) {
      // console.log(row),
      //   console.log(column);
      console.log(cell);
      console.log(event);
      if (row.isEdit) return;
      row.isEdit = !row.isEdit;
    },

    addtable() {
      var obj = {
        DFT_CODE: "",
        DFT_NAME: "",
        DFT_TYPE: "",
        isAbnormal: false,
        isEdit: false,
      };
      this.tableData.unshift(obj);
      //   console.log(this.tableData.length);
    },

    savetable() {
      let ary = [];
      this.tableData.forEach((item) => {
        let obj = {
          DFT_CODE: item.DFT_CODE,
          DFT_NAME: item.DFT_NAME,
          DFT_TYPE: item.DFT_TYPE,
        };
        ary.push(obj);
      });
      //    console.log(ary)

      for (let i = 0; i < ary.length - 1; i++) {
        if (ary[i].DFT_CODE == ary[i + 1].DFT_CODE) {
          this.$alert(ary[i].DFT_CODE, "DFT_CODE不能相同", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message({
                type: "info",
                message: `action: ${action}`,
              });
            },
          });
          return;
        } else if (ary[i].DFT_NAME == "") {
          this.blurname(ary[i].DFT_NAME);
          return
        } else if (ary[i].DFT_TYPE == "") {
          this.blurtype(ary[i].DFT_TYPE);
          return;
        } else {
          this.ajax({
            method: "POST",
            url: "func/1023/updateDef?",
            data: ary,
          }).then((res) => {
            if (res.data.code == 2000) {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.gettablelist();
            }else{
                 this.$alert(res.data.text, "id不能相同", {
                      confirmButtonText: "确定",
                          callback: (action) => {
                            this.$message({
                              type: "info",
                              message: `action: ${action}`,
                            });
                          },
                    });
            }
          });
        }
        return
      }
    },

    DFT_CODE(item, id) {
      if (id == "") {
        this.$alert("DFT_CODE不能为空", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },

    blurname(id) {
      if (id == "") {
        this.$alert("DFT_NAME不能为空", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },

    blurtype(id) {
      if (id == "") {
        this.$alert("DFT_TYPE不能为空", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },
    thStyleFun() {
      return "text-align: center;background:#696969;color:#fff;text-align:center";
    },
    cellStyleFun() {
      return "text-align:center";
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      row.isLoading = true;
      this.$confirm("此操作将进行删除操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          setTimeout(function () {
            row.isLoading = false;
          }, 1500);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          row.isLoading = false;
        });
      console.log(index, row);
      console.log(this.tableData.length);
    },
  },
};
</script>

<style  scoped>
.allcation_cont {
  width: 100%;
}
.allcatin_top {
  width: 100%;
  /* border:1px solid #000; */
  display: flex;
  background: #ffffff;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-top: 5px;
  /* padding-right:-10px; */
}
.allcatin_hader {
  margin-top: 30px;
}
</style>